$MAIN_COLOR: rgba(0, 0, 0, 0.55);
$BORDER_COLOR: #170f22;
$HIGHLIGHT_COLOR: rgb(181, 99, 50);
$COLOR_MAIN_COLOR: rgb(86, 86, 86);

@mixin H1 {
  font-size: 1.6em;
}

@mixin H2 {
  font-size: 1.3em;
}

@mixin H3 {
  font-size: 1.1em;
}

@mixin H4 {
  font-size: 0.9em;
}

@mixin TextStrokeNormal {
  font-style: italic;
  color: white;
  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
}

@mixin UIPanel {
  // border: 1px solid $BORDER_COLOR;
  box-shadow: 0px 0px 30px 50px $MAIN_COLOR; /* change to alter the effect*/
  background-color: $MAIN_COLOR;
  opacity: 0.7;
}

@mixin UIButton {
  border: 1px solid $BORDER_COLOR;
  background-color: $COLOR_MAIN_COLOR;
  text-align: center;

  &:hover {
    transition: all 0.1s ease-in-out;
    background: $HIGHLIGHT_COLOR;
  }

  &:active {
    transition: all 0s ease-in-out;
    background: $HIGHLIGHT_COLOR + 1;
  }
}

@mixin UIRhombusButton {
  @include UIButton;
  transform: skew(-5deg);
}
